<template>
	<view class="page">
		<view class="fun-flex-col content">
			<text class="title">Your digital wallet address</text>
			<view class="address">{{address}}</view>
			<view class="btn" @click="changeAddress">Change my address</view>
		</view>
		
		<common-modal v-if='isShowModal' :popData="popData" @done="done" @close='isShowModal = false'></common-modal>
	</view>
</template>

<script>
	import commonModal from "@/components/commonModal.vue";
	export default {
		data() {
			return {
				isShowModal:false,
				address:"",
				popData:{}
			};
		},
		
		onLoad(option) {
			this.address = decodeURIComponent(option.address);
		},

		methods: {
			changeAddress(){
				this.popData = {
					icon:require("@/static/common/tips.png"),
					title:"Please note",
					content:"We will process your change of address within 48 hours, during which time you will not be able to make withdrawals.",
					btnText:["Cancel","Continue"]
				}
				this.isShowModal = true;
			},
			
			done(){
				uni.navigateTo({url:`/pages/more/changeAddress?address=`+encodeURIComponent(this.address)})
			}
		},
		
		components:{
			commonModal
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 60rpx;
		.content {
			.title {
				font-weight: bold;
				font-size: 36rpx;
				line-height: 40rpx;
			}
			.address{
				width: 100%;
				padding-top: 40rpx;
				padding-bottom: 64rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #121212;
				line-height: 40rpx;
				word-break: break-all;
				overflow-wrap: break-word
			}

			.btn {
				width: 100%;
				padding: 28rpx 0;
				background: #1A7B99;
				line-height: 40rpx;
				border-radius: 10rpx;
				text-align: center;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}

		.section_2 {
			padding: 524rpx 0;
			background-color: #1314164d;
			overflow: hidden;

			.section_5 {
				margin: 0 30rpx;
				padding: 52rpx 36rpx 72rpx 80rpx;
				background-color: #ffffff;
				border-radius: 20rpx;

				.image_5 {
					width: 110rpx;
					height: 110rpx;
				}

				.image_6 {
					width: 46rpx;
					height: 50rpx;
				}

				.group_2 {
					margin-right: 28rpx;

					.text_5 {
						color: #000000;
						font-size: 40rpx;
						font-family: SF Pro Display;
						line-height: 28.58rpx;
					}

					.text_6 {
						color: #7f7f7f;
						line-height: 44rpx;
						text-align: center;
					}
				}

				.group_3 {
					padding: 0 68rpx;

					.text-wrapper {
						padding: 16rpx 0;
						background-color: #ffffff33;
						border-radius: 30rpx;
						width: 188rpx;
						height: 56rpx;
						border-left: solid 2rpx #7f7f7f;
						border-right: solid 2rpx #7f7f7f;
						border-top: solid 2rpx #7f7f7f;
						border-bottom: solid 2rpx #7f7f7f;

						.text_7 {
							color: #000000;
						}
					}

					.text-wrapper_2 {
						padding: 16rpx 0;
						background-color: #1a7b99;
						border-radius: 30rpx;
						width: 188rpx;
						height: 56rpx;

						.text_8 {
							color: #ffffff;
						}
					}
				}

				.font_2 {
					font-size: 28rpx;
					font-family: SF Pro Display;
					line-height: 20.38rpx;
				}
			}
		}

		.pos {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}
</style>